<template>
	<!-- 场馆列表 -->
	<view class="venue-list">
		<view class="venue-row">
			<view class="venue-item" v-for="(item,index) in venueList" :key="index" @click="goToVenueDetail(item.id)">
				<!-- 图片容器，添加加载效果 -->
				<view class="image-container">
					<image class="venue-image"
						:src="item.pictureList && item.pictureList.length > 0 ? urlConstruct(item.pictureList[0].url) : '{{item.url}}'"
						lazy-load="true" mode="aspectFill" @error="onImageError(index)"
						@load="onImageLoad(index)">
					</image>
					<!-- 加载动画 -->
					<view class="image-loading" v-if="!imageLoaded[index]">
						<u-loading-icon mode="circle" color="#2979ff" size="24"></u-loading-icon>
					</view>
				</view>
				<view class="venue-info">
					<view class="venue-name-tag">
						<view class="venue-name">{{truncateName(item.name)}}</view>
						<view class="venue-tags">
							<text class="tag">{{item.typeName}}</text>
						</view>
					</view>
					<view class="venue-meta">
						<view class="map-distance">
							<u-icon name="map" color="#666" size="13"></u-icon>
							<text>{{item.distance ? parseFloat(item.distance).toFixed(1) : '0.0'}}km</text>
							<text class="text-ellipsis">{{item.address}}</text>
						</view>
					</view>
					<view class="venue-contact"></view>
					<view class="venue-hours">
						<view class="icon-text-container">
							<u-icon name="clock" color="#666" size="12"></u-icon>
							<span style="margin-left: 3px;">{{truncateOpenTimeFirstLine(item.openTime)}}</span>
						</view>
						<span class="remaining-open-time">{{truncateOpenTimeRemaining(item.openTime)}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";
	export default {
		data() {
			return {
				imageLoaded: {} // 记录图片加载状态
			};
		},
		props: {
			venueList: {
				type: Array,
				default: () => []
			},
		},
		methods: {
			onImageError(key) {
				console.log(`图片加载失败，索引: ${key}`);
				// 加载失败也标记为已加载，避免一直显示加载动画
				this.$set(this.imageLoaded, key, true);
			},
			onImageLoad(key) {
				// 图片加载完成
				this.$set(this.imageLoaded, key, true);
			},
			urlConstruct(url) {
				return picUrlConstruct(url);
			},
			truncateName(name) {
				if (name&&name.length > 13) {
					return name.slice(0, 10) + '(··';
				}
				return name;
			},
			truncateAddress(address) {
				if (address.length > 12) {
					return address.slice(0, 10) + '(··';
				}
				return address;
			},
			truncateOpenTimeFirstLine(openTime) {
				const maxLength = 20;
				return openTime.slice(0, maxLength);
			},
			truncateOpenTimeRemaining(openTime) {
				const maxLength = 20;
				return openTime.slice(maxLength);
			},
			goToVenueDetail(venueId) {
				uni.navigateTo({
					url: `/pages/venueDetail/venueDetail?id=${venueId}` 
				});
			}
		}
	}
</script>

<style lang="scss">
	.venue-list {
		padding: 20rpx;
		padding-bottom: 0;
		background-color: #f7f7f9;

		.venue-row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.venue-item {
				width: 100%;
				background-color: white;
				border-radius: 12rpx;
				padding: 10px;
				overflow: hidden;
				display: flex;
				align-items: center;
				margin: 4px;
				cursor: pointer;

				.image-container {
					position: relative;
					width: 30%;
					aspect-ratio: 4/4; 
					
					.venue-image {
						width: 100%;
						height: 100%;
						background-color: #f7f7f9;
						border-radius: 5px;
					}
					
					.image-loading {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #f7f7f9;
						border-radius: 5px;
					}
				}

				.venue-info {
					width: 70%;
					padding-left: 8px;
					padding-right: 0;
					line-height: 1.6;
					letter-spacing: 1px;

					.venue-name-tag {
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 6rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.venue-tags {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							font-size: 24rpx;
							margin-right: 5px;
							margin-left: auto;

							.tag {
								background-color: #e8f0fe;
								padding: 6rpx 16rpx;
								border-radius: 16rpx;
								color: #4a6da7;
								font-size: 22rpx;
								font-weight: 600;
							}
						}
					}

					.venue-meta {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 8rpx;

						.map-distance {
							display: flex;
							align-items: center;

							.text-ellipsis {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								width: 200px;
							}
						}

						text {
							margin-right: 20rpx;

							&:last-child {
								margin-right: 0;
							}
						}
					}

					.venue-hours {
						font-size: 12px;
						color: #7e7b6b;

						.icon-text-container {
							display: flex;
							align-items: center;
						}

						.remaining-open-time {
							display: block;
							margin-left: 15px;
						}
					}
				}
			}
		}
	}
</style>